home *** CD-ROM | disk | FTP | other *** search
/ PC World Komputer 2010 April / PCWorld0410.iso / pluginy Firefox / 539 / 539.xpi / content / measureit / measureitOverlay.js < prev   
Text File  |  2010-01-24  |  14KB  |  423 lines
  1. if(!net) var net={};
  2. if(!net.kevinfreitas) net.kevinfreitas={};
  3. if(!net.kevinfreitas.measureit) net.kevinfreitas.measureit={};
  4.  
  5. ( function() {
  6.     var pub = net.kevinfreitas.measureit;
  7.  
  8.     pub.measureitStatus = 0;
  9.     pub.x1 = null;
  10.     pub.y1 = null;
  11.     // pub.x = window._content;
  12.     // var pageBody = pub.x.document.getElementsByTagName("html")[0];
  13.  
  14.     pub.toggle = function() {
  15.         var measureitToolbar = document.getElementById("measureit_toolbar_button");
  16.         var measureitStatusBar = document.getElementById("measureit_statusbar");
  17.  
  18.         if(pub.measureitStatus == 0) { // turn measureit on
  19.             pub.measureitOn();
  20.             if(measureitToolbar) {
  21.                 measureitToolbar.setAttribute("checked", "true");
  22.                 measureitToolbar.setAttribute("tooltiptext", "MeasureIt Off");
  23.             }
  24.             measureitStatusBar.style.backgroundColor = "#fff";
  25.             measureitStatusBar.style.backgroundPosition = "0 0";
  26.             measureitToggleTo = 1;
  27.         }
  28.         else if (pub.measureitStatus == 1) { // turn measureit off
  29.             pub.measureitOff();
  30.             if(measureitToolbar) {
  31.                 measureitToolbar.setAttribute("checked", "false");
  32.                 measureitToolbar.setAttribute("tooltiptext", "MeasureIt On");
  33.             }
  34.             measureitStatusBar.style.backgroundColor = "transparent";
  35.             measureitStatusBar.style.backgroundPosition = "-20px 0";
  36.             measureitToggleTo = 0;
  37.         }
  38.  
  39.         pub.measureitStatus = measureitToggleTo;
  40.     }
  41.  
  42.     pub.measureitOff = function() {
  43.         var x = window._content;
  44.         var pageBody = x.document.getElementsByTagName("html")[0];
  45.  
  46.         x.document.removeEventListener("keypress", pub.keyboardControls, false);
  47.  
  48.         var measureitVellum = x.document.getElementById("measureit");
  49.  
  50.         var pageHead = x.document.getElementsByTagName("head")[0];
  51.         var measureitCSS = x.document.getElementById("measureit_css");
  52.         var measureitJS = x.document.getElementById("measureit_js");
  53.  
  54.         if(measureitVellum != null) {
  55.             pageBody.removeChild(measureitVellum);
  56.  
  57.             pageHead.removeChild(measureitCSS);
  58.             pageHead.removeChild(measureitJS);
  59.         }
  60.     }
  61.  
  62.     pub.measureitOn = function() {
  63.         var x = window._content;
  64.         var pageBody = x.document.getElementsByTagName("html")[0];
  65.  
  66.         x.document.addEventListener("keypress", pub.keyboardControls, false);
  67.  
  68.         // insert header elements
  69.         pub.insertHeaderElements();
  70.  
  71.         var measureItCheck = x.document.getElementById("measureit");
  72.  
  73.         if(measureItCheck == null) {
  74.             var divMeasureit = x.document.createElement("div");
  75.             divMeasureit.setAttribute("id", "measureit");
  76.  
  77.             var divMeasureitBack = x.document.createElement("div");
  78.             divMeasureitBack.setAttribute("id", "measureit_back");
  79.             divMeasureitBack.setAttribute("onmousedown", "net.kevinfreitas.measureit.drawStart(event)");
  80.  
  81.             divMeasureit.appendChild(divMeasureitBack);
  82.  
  83.             pageBody.appendChild(divMeasureit);
  84.         }
  85.     }
  86.  
  87.     pub.insertHeaderElements = function() {
  88.         var x = window._content;
  89.         var pageBody = x.document.getElementsByTagName("html")[0];
  90.         var pageHead = x.document.getElementsByTagName("head")[0];
  91.  
  92.         if(pageHead == null) { // if page head doesn't exist, create one
  93.             var pageHead = x.document.createElement("head");
  94.  
  95.             pageBody.appendChild(pageHead);
  96.  
  97.             var pageHead = x.document.getElementsByTagName("head")[0];
  98.         }
  99.  
  100.         var cssCheck = x.document.getElementById("measureit_css");
  101.         var jsCheck = x.document.getElementById("measureit_js");
  102.  
  103.         if(cssCheck == null) { // insert stylesheet reference
  104.             var linkMeasureitCSS = x.document.createElement("link");
  105.             linkMeasureitCSS.setAttribute("id", "measureit_css");
  106.             linkMeasureitCSS.setAttribute("rel", "stylesheet");
  107.             linkMeasureitCSS.setAttribute("type", "text/css");
  108.             linkMeasureitCSS.setAttribute("href", "chrome://measureit/skin/measureit.css");
  109.  
  110.             pageHead.appendChild(linkMeasureitCSS);
  111.         }
  112.  
  113.         if(jsCheck == null) { // insert javascript reference
  114.             var scriptMeasureitJS = x.document.createElement("script");
  115.             scriptMeasureitJS.setAttribute("id", "measureit_js");
  116.             scriptMeasureitJS.setAttribute("language", "JavaScript");
  117.             scriptMeasureitJS.setAttribute("type", "text/javascript");
  118.             scriptMeasureitJS.setAttribute("src", "chrome://measureit/content/measureitOverlay.js");
  119.  
  120.             pageHead.appendChild(scriptMeasureitJS);
  121.         }
  122.     }
  123.  
  124.     pub.drawStart = function(event) {
  125.         var x = window._content;
  126.         var measureItCheck = x.document.getElementById("measureit_proper");
  127.         if(measureItCheck == null) {
  128.             pub.rulerDOM();
  129.         }
  130.  
  131.         // set initial point coordinates
  132.         tempX1 = event.clientX;
  133.         tempY1 = event.clientY;
  134.         event.preventDefault();
  135.  
  136.         var toolbar = document.getElementById("measureit_toolbar");
  137.         toolbar.style.display = "none";
  138.  
  139.         // set the position of the top left corner
  140.         var cropBox = document.getElementById("measureit_box");
  141.         cropBox.style.display = "none";
  142.         cropBox.style.left = tempX1 + "px";
  143.         cropBox.style.top = tempY1 + "px";
  144.  
  145.         pub.x1 = tempX1;
  146.         pub.y1 = tempY1;
  147.  
  148.         x.document.addEventListener("mousemove", pub.drawRuler, true);
  149.         x.document.addEventListener("mouseup", pub.drawRulerStop, true);
  150.     }
  151.  
  152.     pub.drawRulerStop = function(event) {
  153.         var x = window._content;
  154.         x.document.removeEventListener("mousemove", pub.drawRuler, true);
  155.         x.document.removeEventListener("mouseup", pub.drawRulerStop, true);
  156.     }
  157.  
  158.     pub.drawRuler = function(event) {
  159.         event.preventDefault();
  160.         var tempX, tempY, x2, y2;
  161.         var leftCorner = 0;
  162.  
  163.         var tempX1 = pub.x1;
  164.         var tempY1 = pub.y1;
  165.         // alert("x1: " + tempX1 + " | y1: " + tempY1);
  166.  
  167.         tempX = event.clientX;
  168.         tempY = event.clientY;
  169.  
  170.         var cropBox = document.getElementById("measureit_box");
  171.  
  172.         var leftCorner = 1;
  173.  
  174.         var x2 = tempX;
  175.         var y2 = tempY;
  176.  
  177.         // do the numbers
  178.         if(x2 > tempX1) {
  179.             var left = tempX1;
  180.             var width = (x2-tempX1)-1;
  181.         } else {
  182.             var left = x2;
  183.             var width = (tempX1-x2)-1;
  184.         }
  185.         var right = (left+width);
  186.  
  187.         if(y2 > tempY1) {
  188.             var top = tempY1;
  189.             var height = (y2-tempY1)-1;
  190.         } else {
  191.             var top = y2;
  192.             var height = (tempY1-y2)-1;
  193.         }
  194.  
  195.         // adjust cropBox with mouse movement
  196.         cropBox.style.display = "none";
  197.         cropBox.style.left = left + "px";
  198.         cropBox.style.top = top + "px";
  199.         if(width >= 0) {
  200.             cropBox.style.width = width + "px";
  201.             cropBox.style.borderRightWidth = "1px";
  202.         } else { // for 1px wide line
  203.             cropBox.style.width = "0px";
  204.             cropBox.style.borderRightWidth = "0";
  205.         }
  206.         if(height >= 0) {
  207.             cropBox.style.height = height + "px";
  208.             cropBox.style.borderBottomWidth = "1px";
  209.         } else {
  210.             cropBox.style.height = "0px";
  211.             cropBox.style.borderBottomWidth = "0";
  212.         }
  213.         cropBox.style.display = "block";
  214.  
  215.         var toolbar = document.getElementById("measureit_toolbar");
  216.         toolbar.style.display = "block";
  217.  
  218.         pub.placeToolbar(right, top);
  219.         pub.toolbarText(width, height);
  220.     }
  221.  
  222.     pub.placeToolbar = function(posLeft, posTop) {
  223.         var x = window._content;
  224.         var rightBounds = window.innerWidth-21;
  225.         var toolbar = x.document.getElementById("measureit_toolbar");
  226.  
  227.         toolbar.style.visibility = "hidden";
  228.         if(posLeft+124 < rightBounds) {
  229.             toolbar.style.left = posLeft + "px";
  230.             toolbar.style.top = posTop + "px";
  231.         } else { // ruler too close to right edge of browser
  232.             toolbar.style.left = rightBounds-124 + "px";
  233.             toolbar.style.top = posTop+14 + "px";
  234.         }
  235.         toolbar.style.visibility = "visible";
  236.     }
  237.  
  238.     pub.toolbarText = function(width, height) {
  239.         var widthInfo = document.getElementById("measureit_width");
  240.         if(widthInfo.hasChildNodes() == 1) { widthInfo.removeChild(widthInfo.firstChild); }
  241.         var widthText = document.createTextNode("W: " + (width+2) + "px");
  242.  
  243.         var heightInfo = document.getElementById("measureit_height");
  244.         if(heightInfo.hasChildNodes() == 1) { heightInfo.removeChild(heightInfo.firstChild); }
  245.         var heightText = document.createTextNode("H: " + (height+2) + "px");
  246.  
  247.         widthInfo.appendChild(widthText);
  248.         heightInfo.appendChild(heightText);
  249.     }
  250.  
  251.     pub.rulerDOM = function() {
  252.         var x = window._content;
  253.         var divMeasureit = x.document.getElementById("measureit");
  254.  
  255.         var divMeasureitProper = x.document.createElement("div");
  256.         divMeasureitProper.setAttribute("id", "measureit_proper");
  257.  
  258.         var divMeasureitBox = x.document.createElement("div");
  259.         divMeasureitBox.setAttribute("id", "measureit_box");
  260.  
  261.         var divMeasureitBoxDiv = x.document.createElement("div");
  262.         divMeasureitBoxDiv.setAttribute("id", "measureit_ruler_top");
  263.  
  264.         var divMeasureitBoxDivDiv = x.document.createElement("div");
  265.         divMeasureitBoxDivDiv.setAttribute("id", "measureit_ruler_left");
  266.         divMeasureitBoxDivDiv.addEventListener("mousedown", pub.dragStart, true);
  267.  
  268.         var divMeasureitToolbar = x.document.createElement("div");
  269.         divMeasureitToolbar.setAttribute("id", "measureit_toolbar");
  270.  
  271.         var aMeasureitClear = x.document.createElement("a");
  272.         aMeasureitClear.setAttribute("id", "measureit_clear");
  273.         aMeasureitClear.setAttribute("onclick", "net.kevinfreitas.measureit.clearCrop()");
  274.         aMeasureitClear.setAttribute("title", "Click to remove this ruler");
  275.  
  276.         var spanWidth = x.document.createElement("span");
  277.         spanWidth.setAttribute("id", "measureit_width");
  278.  
  279.         var spanHeight = x.document.createElement("span");
  280.         spanHeight.setAttribute("id", "measureit_height");
  281.  
  282.         divMeasureitToolbar.appendChild(aMeasureitClear);
  283.         divMeasureitToolbar.appendChild(spanWidth);
  284.         divMeasureitToolbar.appendChild(spanHeight);
  285.  
  286.         divMeasureitBoxDiv.appendChild(divMeasureitBoxDivDiv);
  287.  
  288.         divMeasureitBox.appendChild(divMeasureitBoxDiv);
  289.  
  290.         divMeasureitProper.appendChild(divMeasureitBox);
  291.         divMeasureitProper.appendChild(divMeasureitToolbar);
  292.  
  293.         divMeasureit.appendChild(divMeasureitProper);
  294.     }
  295.  
  296.     pub.clearCrop = function() {
  297.         var x = window._content;
  298.  
  299.         // hide everything
  300.         cropBox = x.document.getElementById("measureit_box");
  301.         cropBox.style.display = "none";
  302.  
  303.         toolbar = x.document.getElementById("measureit_toolbar");
  304.         toolbar.style.display = "none";
  305.     }
  306.  
  307.     // inspired by "Generic Drag" by Mike Hall at http://www.brainjar.com/dhtml/drag/
  308.     pub.dragBox = new Object();
  309.  
  310.     pub.dragStart = function(event) {
  311.         var x = window._content;
  312.  
  313.         pub.dragBox.clickedBox   = event.target; // get object that was clicked on
  314.         pub.dragBox.measureitBox = x.document.getElementById("measureit_box");
  315.         pub.dragBox.measureitToolbar = x.document.getElementById("measureit_toolbar");
  316.         pub.dragBox.rightBounds = window.innerWidth-21;
  317.  
  318.         pub.dragBox.cursorX1 = event.clientX;
  319.         pub.dragBox.cursorY1 = event.clientY;
  320.  
  321.         pub.dragBox.boxStartLeft = parseInt(document.defaultView.getComputedStyle(pub.dragBox.measureitBox, "").getPropertyValue("left"));
  322.         pub.dragBox.boxStartTop  = parseInt(document.defaultView.getComputedStyle(pub.dragBox.measureitBox, "").getPropertyValue("top"));
  323.  
  324.         pub.dragBox.measureitBox.setAttribute("class", "dragging");
  325.  
  326.         document.addEventListener("mousemove", pub.dragGo,   true);
  327.         document.addEventListener("mouseup",   pub.dragStop, true);
  328.         event.preventDefault();
  329.     }
  330.  
  331.     pub.dragGo = function(event) {
  332.         var x2, y2;
  333.         x2 = event.clientX;
  334.         y2 = event.clientY;
  335.  
  336.         var newLeft = pub.dragBox.boxStartLeft + x2 - pub.dragBox.cursorX1;
  337.         var newTop  = pub.dragBox.boxStartTop + y2 - pub.dragBox.cursorY1;
  338.         if(newLeft < 0) newLeft = 0;
  339.         if(newTop < 0) newTop = 0;
  340.         var newRight = parseInt(document.defaultView.getComputedStyle(pub.dragBox.measureitBox, "").getPropertyValue("width")) + newLeft + 2;
  341.  
  342.         pub.dragBox.measureitBox.style.visibility = "hidden";
  343.         pub.dragBox.measureitBox.style.left = newLeft + "px";
  344.         pub.dragBox.measureitBox.style.top = newTop + "px";
  345.         pub.dragBox.measureitBox.style.visibility = "visible";
  346.  
  347.         // placeToolbar(newRight, newTop);
  348.         // var rightBounds = window.innerWidth-21;
  349.  
  350.         pub.dragBox.measureitToolbar.style.visibility = "hidden";
  351.         if(newRight+124 < pub.dragBox.rightBounds) {
  352.             pub.dragBox.measureitToolbar.style.left = newRight + "px";
  353.             pub.dragBox.measureitToolbar.style.top = newTop + "px";
  354.         } else { // ruler too close to right edge of browser
  355.             pub.dragBox.measureitToolbar.style.left = pub.dragBox.rightBounds-124 + "px";
  356.             pub.dragBox.measureitToolbar.style.top = newTop+14 + "px";
  357.         }
  358.         pub.dragBox.measureitToolbar.style.visibility = "visible";
  359.     }
  360.  
  361.     pub.dragStop = function(event) {
  362.         pub.dragBox.measureitBox.setAttribute("class", null);
  363.  
  364.         document.removeEventListener("mousemove", pub.dragGo,   true);
  365.         document.removeEventListener("mouseup",   pub.dragStop, true);
  366.     }
  367.  
  368.     pub.moveRuler = function(xDist, yDist) {
  369.         var x = window._content;
  370.         var measureitBox = x.document.getElementById("measureit_box");
  371.  
  372.         var boxStartLeft = parseInt(x.document.defaultView.getComputedStyle(measureitBox, "").getPropertyValue("left"));
  373.         var boxStartTop  = parseInt(x.document.defaultView.getComputedStyle(measureitBox, "").getPropertyValue("top"));
  374.  
  375.         var newLeft = boxStartLeft + xDist;
  376.         var newTop  = boxStartTop + yDist;
  377.         if(newLeft < 0) newLeft = 0;
  378.         if(newTop < 0) newTop = 0;
  379.         var newRight = parseInt(x.document.defaultView.getComputedStyle(measureitBox, "").getPropertyValue("width")) + newLeft + 2;
  380.         var rightBounds = window.innerWidth-21;
  381.  
  382.         measureitBox.style.visibility = "hidden";
  383.         measureitBox.style.left = newLeft + "px";
  384.         measureitBox.style.top = newTop + "px";
  385.         measureitBox.style.visibility = "visible";
  386.  
  387.         var measureitToolbar = x.document.getElementById("measureit_toolbar");
  388.         measureitToolbar.style.visibility = "hidden";
  389.         if(newRight+124 < rightBounds) {
  390.             measureitToolbar.style.left = newRight + "px";
  391.             measureitToolbar.style.top = newTop + "px";
  392.         } else { // ruler too close to right edge of browser
  393.             measureitToolbar.style.left = rightBounds-124 + "px";
  394.             measureitToolbar.style.top = newTop+14 + "px";
  395.         }
  396.         measureitToolbar.style.visibility = "visible";
  397.     }
  398.  
  399.     pub.keyboardControls = function(event) {
  400.         var pressedKey = event.keyCode;
  401.         var pressedCtrl = event.ctrlKey;
  402.         var pressedShft = event.shiftKey;
  403.         event.preventDefault();
  404.  
  405.         if(pressedCtrl) var offsetValue = 1;
  406.         if(pressedShft) var offsetValue = 5;
  407.  
  408.         if(pressedKey == 27) pub.toggle(); // ESC key
  409.  
  410.         if(pressedCtrl) {
  411.             switch(pressedKey) {
  412.                 case 37: pub.moveRuler(-offsetValue, 0); break;    // left arrow
  413.                 case 39: pub.moveRuler(offsetValue, 0); break;    // right arrow
  414.                 case 38: pub.moveRuler(0, -offsetValue); break;    // up arrow
  415.                 case 40: pub.moveRuler(0, offsetValue); break;    // down arrow
  416.             }
  417.         }
  418.     }
  419.  
  420.  
  421. })();
  422.  
  423. var mi = net.kevinfreitas.measureit;